/**
 * 统计面板主组件
 * 展示用户的创作数据统计
 */
import React, { useEffect } from 'react';
import { Card, Row, Col, Statistic, Spin, Alert, Button, Segmented, Space } from 'antd';
import {
  FileTextOutlined,
  EditOutlined,
  CalendarOutlined,
  FireOutlined,
  TrophyOutlined,
  RobotOutlined,
  BulbOutlined,
  FileProtectOutlined,
  ReloadOutlined,
  DownloadOutlined,
} from '@ant-design/icons';
import { useStatisticsStore } from '@/stores/statistics.store';
import type { TimeRange } from '@/types/statistics';
import './style.css';

interface StatisticsPanelProps {
  className?: string;
}

export const StatisticsPanel: React.FC<StatisticsPanelProps> = ({ className }) => {
  const {
    statistics,
    selectedTimeRange,
    loading,
    error,
    loadStatistics,
    setTimeRange,
    downloadReport,
  } = useStatisticsStore();

  useEffect(() => {
    loadStatistics();
  }, [loadStatistics]);

  const handleTimeRangeChange = (value: string | number) => {
    setTimeRange(value as TimeRange);
  };

  const handleDownloadReport = async (format: 'pdf' | 'excel') => {
    try {
      await downloadReport(format, selectedTimeRange);
    } catch (error) {
      console.error('Download report failed:', error);
    }
  };

  if (error) {
    return (
      <Alert
        message="加载失败"
        description={error}
        type="error"
        showIcon
        action={
          <Button size="small" onClick={() => loadStatistics()}>
            重试
          </Button>
        }
      />
    );
  }

  return (
    <div className={`statistics-panel ${className || ''}`}>
      {/* 时间范围选择器和操作按钮 */}
      <div className="statistics-panel-header">
        <Segmented
          value={selectedTimeRange}
          onChange={handleTimeRangeChange}
          options={[
            { label: '今日', value: 'today' },
            { label: '本周', value: 'week' },
            { label: '本月', value: 'month' },
            { label: '全部', value: 'all' },
          ]}
        />

        <Space>
          <Button
            icon={<ReloadOutlined />}
            onClick={() => loadStatistics()}
            loading={loading}
          >
            刷新
          </Button>
          <Button
            icon={<DownloadOutlined />}
            onClick={() => handleDownloadReport('pdf')}
          >
            导出PDF
          </Button>
          <Button
            icon={<DownloadOutlined />}
            onClick={() => handleDownloadReport('excel')}
          >
            导出Excel
          </Button>
        </Space>
      </div>

      <Spin spinning={loading}>
        <Row gutter={[16, 16]} className="statistics-cards">
          {/* 总字数 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="总字数"
                value={statistics?.totalWords || 0}
                prefix={<EditOutlined />}
                suffix="字"
                valueStyle={{ color: '#1890ff' }}
              />
            </Card>
          </Col>

          {/* 文章数 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="文章数"
                value={statistics?.totalArticles || 0}
                prefix={<FileTextOutlined />}
                suffix="篇"
                valueStyle={{ color: '#52c41a' }}
              />
            </Card>
          </Col>

          {/* 创作天数 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="创作天数"
                value={statistics?.totalDays || 0}
                prefix={<CalendarOutlined />}
                suffix="天"
                valueStyle={{ color: '#722ed1' }}
              />
            </Card>
          </Col>

          {/* 连续天数 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="连续创作"
                value={statistics?.consecutiveDays || 0}
                prefix={<FireOutlined />}
                suffix="天"
                valueStyle={{ color: '#f5222d' }}
              />
            </Card>
          </Col>

          {/* 平均质量分 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="平均质量"
                value={statistics?.avgQualityScore || 0}
                precision={1}
                prefix={<TrophyOutlined />}
                suffix="分"
                valueStyle={{ color: '#faad14' }}
              />
            </Card>
          </Col>

          {/* AI使用次数 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="AI使用"
                value={statistics?.aiUsageCount || 0}
                prefix={<RobotOutlined />}
                suffix="次"
                valueStyle={{ color: '#13c2c2' }}
              />
            </Card>
          </Col>

          {/* 模板使用次数 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="模板使用"
                value={statistics?.templateUsageCount || 0}
                prefix={<FileProtectOutlined />}
                suffix="次"
                valueStyle={{ color: '#eb2f96' }}
              />
            </Card>
          </Col>

          {/* 灵感收集数 */}
          <Col xs={24} sm={12} md={8} lg={6}>
            <Card>
              <Statistic
                title="灵感收集"
                value={statistics?.inspirationCount || 0}
                prefix={<BulbOutlined />}
                suffix="个"
                valueStyle={{ color: '#faad14' }}
              />
            </Card>
          </Col>
        </Row>
      </Spin>
    </div>
  );
};

export default StatisticsPanel;
